import React, { useEffect, useState } from "react";
import QueueAnim from "rc-queue-anim";
import "../styles/index.less";
import LazyLoad from "react-lazyload";
import { Row, Col } from "antd";
import { ImageViewer } from 'antd-mobile';
import { enquireScreen } from 'enquire-js';

const EducationInternship = ({ dataSource, ...props }) => {
  const [visible, setVisible] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    enquireScreen((b) => {
      setIsMobile(!!b);
    });
  }, []);
  const { ...currentProps } = props;
  delete currentProps.dataSource;
  const goViewPic = () => {
    setVisible(true);
  }
  return (
    <div className="retail">
      <div {...currentProps} className="retail-banner education-banner">
        <QueueAnim
          key="QueueAnim"
          type={["bottom", "top"]}
          className="banner-text-wrapper"
          delay={200}
        >
          <p className="banner-title">供应链大数据实训</p>
          <p className="banner-describe">
            大数据实训平台是面向高校或职校的大数据、物流供应链专业推出的一款大数据教学实验平台。平台内置了丰富的课程和案例资源、教材、PPT、实验手册、配套的教学视频和各行业案例视频等，为学生提供大数据实验的环境，满足大数据教学课程设计、实验实训、科研训练等多方面需求。
          </p>
        </QueueAnim>
      </div>
      <div className="retail1-wrapper">
        <div className="c-grid-layout">
          <div className="case-top">
            <div>
              <span className="case-title">行业痛点</span>
              <div className="case-line"></div>
            </div>
          </div>
          <div className="case-list">
            <div className="list-inner">
              <Row>
                <Col xs={24} md={8}>
                  <div className="item">
                    <img
                      className="icon"
                      src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/educationItem1.png"
                    />
                    <div>
                      <p className="title">缺乏行业应用实践</p>
                      <p className="subtitle">
                        目前学校教学场景学生实践机会少，教学缺少项目实战案例和可以用于研究的生产场景，使得学生难以做到学以致用。
                      </p>
                    </div>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className="item item2">
                    <img
                      className="icon"
                      src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/educationItem2.png"
                    />
                    <div>
                      <p className="title">大数据学习门槛高</p>
                      <p className="subtitle">
                        数据科学相关技术需要的资源配置比较高，开发、操作环境安装困难，这成了很多编程基础薄弱的学生迈不过去的坎。
                      </p>
                    </div>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className="item item3">
                    <img
                      className="icon"
                      src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/educationItem3.png"
                    />
                    <div>
                      <p className="title">缺乏就业与科研之间的衔接</p>
                      <p className="subtitle">
                        对于专业的技术人才培养还没有一套成熟的规划方案，就业、科研与学习成果之间无衔接过程，科研成果产出能效较低。
                      </p>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>

      <div className="retail2-wrapper">
        <div className="c-grid-layout">
          <div className="case-top">
            <div>
              <span className="case-title">解决方案架构</span>
              <div className="case-line"></div>
            </div>
          </div>
          <div className="pic">
            <LazyLoad>
              {isMobile ? 
                <img onClick={goViewPic} src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/education_h5.png'></img>:
                <img src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/educationSolution.png"></img>
              }
            </LazyLoad>
          </div>
        </div>
      </div>

      <div className="retail3-wrapper">
        <div className="c-grid-layout">
          <div className="case-top">
            <div>
              <span className="case-title">方案优势</span>
              <div className="case-line"></div>
            </div>
          </div>
          <div className="case-list">
            <div className="list-inner">
              <Row>
                <Col xs={24} md={8}>
                  <div className="item">
                    <LazyLoad>
                      <img
                        className="icon"
                        src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/educationList1.png"
                      />
                    </LazyLoad>
                    <p className="title">教学工具标准化</p>
                    <p className="subtitle">
                      通过标准化教学工具配置以及完整教材体系，规范教学手段，统一实训平台部署，提高教学效率。
                    </p>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className="item item2">
                    <LazyLoad>
                      <img
                        className="icon"
                        src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/educationList2.png"
                      />
                    </LazyLoad>
                    <p className="title">项目实践强结合</p>
                    <p className="subtitle">
                      基于10+年行业及项目实践经验，提供仓网规划、路径规划、网络设计等丰富生产场景，呈现真实实训环境。
                    </p>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className="item item3">
                    <LazyLoad>
                      <img
                        className="icon"
                        src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/educationList3.png"
                      />
                    </LazyLoad>
                    <p className="title">师生共用易上手</p>
                    <p className="subtitle">
                      实训平台操作简便易上手，结合针对教学操作指引，充分发挥教师的引导角色，仅需简单明了的操作步骤，即可安装上手使用。
                    </p>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>
      <ImageViewer
        image='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/education_h5.png'
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
    </div>
  );
};

export default EducationInternship;
